<template>
  <scroll-view
    class="list"
    scroll-y
    @scrolltolower="onScrolltolower"
    :style="{
      height: `calc(100vh - ${props.height}rpx)`,
    }"
  >
    <view class="item">
      <view
        class="activity_box"
        v-for="(i_item, i_index) in listData.activity"
        :key="i_index"
        @click="toDetail(i_item.activityId)"
      >
        <time-range-bar
          :title="i_item.activityTitle"
          :status="i_item.activityState"
          :time="`${i_item?.startTime} - ${i_item?.endTime}`"
          :description="i_item?.category.categoryMsg"
        />
        <image class="cover" :src="i_item.activityCover" mode="aspectFill" />
        <view class="address">
          <uni-icons type="location" size="20" class="icon" />
          <view
            class="msg"
            :class="{ overdueColor: checkStateEnum(i_item.activityState,ActivitySateEnum.ENDED)  }"
            >{{ i_item.activityAddress }}</view
          >
        </view>
      </view>
    
    
        <!-- 加载状态 -->
        <load :status="loadStatue" :isImage="listData.activity.length<1"  />
    </view>


  </scroll-view>
</template>

<!-- 活动列表组件 -->
<script lang="ts" setup>
import { ActivitySateEnum,checkStateEnum } from '@/config/enum/enum'
import { ReqSelectActivityByCategory } from '@/api/activity'
import timeRangeBar from '@/components/common/time_range_bar/time-range-bar.vue'
import type {
  Category,
  PageByActivity,
  QueryPageByActivity,
} from '@/config/data/data'
import { onMounted, ref, watch, type PropType } from 'vue'

//自定义事件
const emit = defineEmits<{
  /**
   * 滚动到底部事件
   */
  (e: 'onScrollBottom'): void
  /**
   *  刷新完成
   */
  (e: 'onRefresh'): void
}>()

//请求是否结束,防重复请求
const isReq = ref(true)

//接受父组件参数
const props = defineProps({
  /**
   * 高度,单位rpx
   */
  height: {
    type: Number,
    default: 0,
  },
  /**
   * 分类
   */
  category: {
    type: Object as PropType<Category>,
    default: '',
  },
  /**
   * 是否下拉刷新
   */
  refresh: {
    type: Boolean,
    default: false,
  },
  /**
   * 当前展示内容盒子的下标
   */
  current: {
    type: Number,
    default: 0,
  },
})

//监听是否下拉刷新
watch(
  () => props.refresh,
  (newValue, oldValue) => {
    if (newValue && !oldValue) {
      //重新加载数据，初始化分页查询参数与数据列表
      queryPage.value.page = 0
      next(true).finally(() => {
        emit('onRefresh')
      })
    }
  }
)

//活动数据列表
const listData = ref<PageByActivity>({
  total: 0,
  activity: [],
})

//加载状态
const loadStatue = ref(1)

/**
 * 跳转详情
 * @param id: 商品id
 */
const toDetail = (id: number | string) => {
  uni.navigateTo({ url: `../../subpkg/activity/detail?id=${id}` })
}


//请求参数类型
const queryPage = ref<QueryPageByActivity>({
  page: 0,
  size: 4,
  categoryId: 0,
})

/**
 * 下一页
 * @param refresh 是否刷新
 * @returns 返回一个Promise 标识请求是否结束
 */
const next = (refresh: boolean = false) => {
  return new Promise((reslove) => {
    //上个请求并未结束,或者 已经没有更多 同时不是刷新状态下
    if (
      (!isReq.value ||
        (listData.value.total <= listData.value.activity.length &&
          listData.value.total != 0)) &&
      !refresh
    ) {
      reslove(true)
      return
    }
    //分页加一
    queryPage.value.page += 1
    //分类id获取
    queryPage.value.categoryId = props.category.categoryId
    //请求开始、加载状态变更
    isReq.value = false
    loadStatue.value = 0
    ReqSelectActivityByCategory(queryPage.value)
      .then((res) => {
        if (res.code == 200 && res.data?.activity) {
          listData.value.total = res.data.total
          refresh ? (listData.value.activity = []) : ''
          listData.value.activity.push(...res.data.activity)

          //是否还有更多
          loadStatue.value =
            listData.value.total <=
            listData.value.activity.length * queryPage.value.page
              ? -1
              : 1
        }
      }).catch(()=>{
        loadStatue.value = -2
        setTimeout(() => {
          loadStatue.value = -1
        }, 100)
      })
      .finally(() => {
        //请求结束，向往传递请求结束标识
        isReq.value = true
        reslove(true)
      })
  })
}

//加载
onMounted(() => {
  next()
})

//监听滚动底部事件
const onScrolltolower = (e: any) => {
  //下一页数据
  next()
}
</script>

<style scoped lang="scss">
.list {
  display: inline-flex;
  width: calc(100% - 40rpx);
  padding: 0 20rpx 20rpx;

  ::-webkit-scrollbar {
    width: 0 !important;
    background: transparent !important;
  }

  .item {
    width: 100%;

    .activity_box {
      width: 100%;
      margin: 0 0 100rpx;
      border-radius: 10rpx;

      .cover {
        width: 100%;
        height: 300rpx;
        margin: 20rpx 0 2rpx;
        border-radius: 20rpx;
      }

      .address {
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 24rpx;
        .icon {
          transform: translateY(2rpx);
        }
        .msg {
          width: calc(100% - 6rpx);
          margin-left: 6rpx;
        }
      }
    }
  }
}
</style>
